<template>
	<view class="page-photo-print-detail">
		<view class="top-banner">
			<image src="https://sspzjz.oss-cn-shanghai.aliyuncs.com/photo/print/shzdy.png" mode="widthFix"></image>
			<text class="price">
				<text class="price-num">
					{{activeMaterial.discount}}
				</text>
				<text>元/张</text>
			</text>
		</view>
		<view class="title flex-start-center">
			<image class="item-icon" src="/static/print/phot-size.png" mode="widthFix"></image>
			<text>照片尺寸</text>
		</view>
		<view class="choose-list">
			<view :class="['choose-item', {active: item.value === activeSize.value}]" v-for="item in lifeSizeList"
				:key="item.value" @tap="onClickSizeItem(item)">
				{{item.text}}
			</view>
		</view>
		<view class="title flex-start-center">
			<image class="item-icon" src="/static/print/print-count.png" mode="widthFix"></image>
			<text>打印数量</text>
		</view>
		<view class="choose-list">
			<view :class="['choose-item', {active: item.value === activeCount.value}]" v-for="item in countList"
				:key="item.value" @tap="onClickCountItem(item)">
				{{item.text}}
			</view>
		</view>
		<view class="title flex-start-center">
			<image class="item-icon" src="/static/print/material-selection.png" mode="widthFix"></image>
			<text>选择材质</text>
		</view>
		<view class="choose-list">
			<view :class="['choose-item','free-width',{active: item.id === activeMaterial.id}]"
				v-for="item in materialList" :key="item.value" @tap="onClickMaterialItem(item)">
				{{item.name}}
			</view>
		</view>
		<view class="title flex-start-center">
			<image class="item-icon" src="/static/print/express-icon.svg" mode="widthFix"></image>
			<text>邮寄方式</text>
		</view>
		<view class="choose-list">
			<view :class="['choose-item','free-width',{active: item.id === activeExpress.id}]"
				v-for="item in expressList" :key="item.value" @tap="onClickExpressItem(item)">
				{{item.name}}
				<text class="desc-14">（{{item.discount}}元）</text>
			</view>
		</view>
		<view class="fixed-bottom-btn back-gray">
			<view class="custom-button full-button" @tap="onSubmit">
				<u-button type="primary" shape="circle" text="上传照片"></u-button>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		queryPackageApi,
	} from '@/common/js/method.js';
	import {
		lifeSizeList,
	} from '@/common/js/data.js';
	const printService = ref({});


	const countList = [{
		value: 5,
		text: '5张',
	}, {
		value: 10,
		text: '10张',
	}, {
		value: 20,
		text: '20张',
	}, {
		value: 50,
		text: '50张',
	}];
	const materialList = ref([]);
	const expressList = ref([]);
	const activeSize = ref(lifeSizeList[0]);
	const activeCount = ref(countList[0]);
	const activeMaterial = ref({});
	const activeExpress = ref({});
	// 查询套餐
	const getPackageInfo = async () => {
		// 套餐类型，1-充值套餐，2-保存电子照套餐，3-冲印邮寄套餐，4-快递方式套餐 5-照片剪辑套餐，6-换底色套餐，7-黑白上色套餐，8-漫画照套餐，9-素描化套餐，10-画质增强套餐，11-证件照打印，12-生活照打印
		let res = await queryPackageApi([12, 4])
		materialList.value = res[0].data.packageList;
		activeMaterial.value = res[0].data.packageList[0];
		expressList.value = res[1].data.packageList;
		activeExpress.value = res[1].data.packageList[0];
	}
	const onClickSizeItem = (item) => {
		activeSize.value = item;
	};
	const onClickCountItem = (item) => {
		activeCount.value = item;
	};
	const onClickMaterialItem = (item) => {
		activeMaterial.value = item;
	};
	const onClickExpressItem = (item) => {
		activeExpress.value = item;
	};
	const onSubmit = () => {
		uni.chooseImage({
			count: 20, //默认9
			sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
			// sourceType: ['album'], //从相册选择
			success: function(res) {
				console.log('temFilePaths', res.tempFilePaths)
				const data = {
					size: {
						name: activeSize.value.text,
						id: activeSize.value.id,
						value: activeSize.value.value,
					},
					count: {
						name: activeCount.value.text,
						id: activeCount.value.value,
					},
					meterial: {
						name: activeMaterial.value.name,
						id: activeMaterial.value.id,
						discount: activeMaterial.value.discount,
						amount: activeMaterial.value.amount,
					},
					express: {
						name: activeExpress.value.name,
						id: activeExpress.value.id,
						discount: activeExpress.value.discount,
						amount: activeExpress.value.amount,
					},
					temFilePaths: res.tempFilePaths
				};
				uni.navigateTo({
					url: `/pages/photo-print/photo-print-preview?data=${JSON.stringify(data)}`
				})
			}
		});

	};
	getPackageInfo();
</script>

<style lang="scss" scoped>
	.page-photo-print-detail {
		min-height: 100vh;
		box-sizing: border-box;
		background: rgba(245, 245, 245, 1);
		padding: 20rpx 32rpx 280rpx 32rpx;
		display: flex;
		flex-direction: column;
		gap: 20px;

		.top-banner {
			position: relative;
			width: 100%;
			height: 386rpx;
			border-radius: 16rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}

			.price {
				position: absolute;
				bottom: 16rpx;
				right: 32rpx;
				/** 文本2 */
				font-size: 28rpx;
				line-height: 1;
				color: rgba(212, 48, 48, 1);

				.price-num {
					/** 文本1 */
					font-size: 48rpx;
					font-weight: 700;
					line-height: 56rpx;
				}

			}
		}

		.item-icon {
			width: 24px;
			height: 24px;
			margin-right: 5px;
		}

		.choose-list {
			display: flex;
			flex-wrap: wrap;
			gap: 20px;

			.choose-item {
				width: 140rpx;
				border-radius: 8rpx;
				border: 1px solid rgba(229, 229, 229, 1);
				box-sizing: border-box;
				background-color: #fff;
				font-size: 28rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: rgba(56, 56, 56, 1);

				&.free-width {
					width: auto;
					padding: 0 10px;
				}

				&.middle-wdith {
					width: 156rpx;
				}

				&.long-width {
					width: 240rpx;
				}

				&.active {
					color: rgba(69, 144, 229, 1);
					border: 2px solid rgba(69, 144, 229, 1);
					.desc-14 {
						color: rgba(69, 144, 229, 1);
					}
				}
			}
		}
	}
</style>